<template>
    <div>
        <ul class="triangle_step">
            <li
                :class="{ cur: active >= index }"
                v-for="(item, index) in stepArr"
                :key="index"
                :style="{ width: width }"
            >
                <span>{{ item.title }}</span>
                <div
                    v-if="index < stepArr.length - 1"
                    :class="active >= index ? 'jiaoActive' : 'jiao'"
                ></div>
                <div class="interval"></div>
            </li>
        </ul>
        <el-button type="primary" @click="nextTip">下一步</el-button>
    </div>
</template>
<script>
export default {
    props: {
        active: {
            default: 0,
        },
        stepArr: {
            default: [
                {
                    title: "aaa",
                },
                {
                    title: "bbb",
                },
                {
                    title: "ccc",
                },
            ],
        },
        width: {
            default: "100%",
        },
    },
    watch: {
        active(a) {
            if (a <= 0) {
                this.$emit("update:active", 0);
                console.log("已经是最小值了" + a);
            }
            if (a > this.stepArr.length - 1) {
                this.$emit("update:active", this.stepArr.length - 1);
                console.log("已经是最大值了" + a);
            }
        },
    },
    data() {
        return {};
    },
    methods: {
        nextTip() {
            this.active++;
        },
    },
};
</script>
<style scoped lang="less">
.triangle_step {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    font-size: 12px;
    li {
        height: 40px;
        background: #d7d8da;
        color: #666;
        text-align: center;
        line-height: 40px;
        list-style: none;
        /*width: 20%;*/
        /*flex-basis: 100%;*/
        position: relative;
    }
    li.cur {
        background: #e8514a;
        color: #fff;
    }
    /*三角形绘制*/
    .jiao {
        width: 0;
        height: 0;
        border-top: 20px solid transparent; /*高度一半*/
        border-left: 20px solid #d7d8da; /*调整宽度*/
        border-bottom: 20px solid transparent; /*高度一半*/
        position: absolute;
        right: -20px; /*跟宽度保持一致*/
        top: 0;
        z-index: 9999;
    }
    .jiaoActive {
        width: 0;
        height: 0;
        border-top: 20px solid transparent; /*高度一半*/
        border-left: 20px solid #e8514a; /*调整宽度*/
        border-bottom: 20px solid transparent; /*高度一半*/
        position: absolute;
        right: -20px; /*跟宽度保持一致*/
        top: 0;
        z-index: 2;
    }
    /*大3个px的边 26-20/2*/
    .interval {
        width: 0;
        height: 0;
        border-top: 26px solid transparent; /*高度一半*/
        border-left: 26px solid #fff; /*调整宽度*/
        border-bottom: 26px solid transparent; /*高度一半*/
        position: absolute;
        right: -26px; /*跟宽度保持一致*/
        top: -6px;
        z-index: 1;
    }
}
</style>